<!-- 评价详情 -->
<template>
  <div class="pageContent">
    <!-- 评价详情头部 -->
    <div class="shopTitle">
      <div class="shopDetailOne">评价详情</div>
      <div class="shopListTwo">
        <el-button @click="getCheckAssess">刷新</el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="shopDetailContent">
      <div class="shopDetailData">
        <div class="dataHead">
          <div>
            <span>评价详情</span>
          </div>
          <div class="shopDetailTwo">
            <el-button>
              <router-link to="/home/Shop/ShopAssess">返回</router-link>
            </el-button>
          </div>
        </div>
        <div class="shopAssessDetail">
          <!-- 用户购买商品数据 -->
          <div class="shopAssessDetailOne">
            <div class="headBox">
              <img :src="userAssessDetail.avatar" alt="" />
              <p>{{ userAssessDetail.nickName }}</p>
            </div>
            <p>商品：{{ userAssessDetail.prodName }}</p>
            <p>尺码：{{ userAssessDetail.size }}</p>
            <p>评分：{{ userAssessDetail.score }}</p>
            <p>评价时间：{{ userAssessDetail.recTime }}</p>
            <p>IP地址：{{ userAssessDetail.postip }}</p>
          </div>
          <!-- 评论内容 -->
          <div class="shopAssessDetailTwo">
            <div class="assessContentBox">
              <div class="assessContent">
                <p>评价内容</p>
                <span>{{ userAssessDetail.content }}</span>
              </div>
              <div class="assessContentImage">
                <p>评价图片</p>
                <div class="assessContentImageList">
                  <div class="" v-for="(item, index) in userAssessDetail.pics" :key="index">
                    <img :src="item" />
                  </div>
                </div>
              </div>
            </div>
            <!-- 评价回复 -->
            <div class="assessReply">
              <p>评价回复</p>
              <el-form :model="assessReply" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="name">
                  <el-input v-model="assessReply.userName" disabled></el-input>
                </el-form-item>
                <el-form-item label="回复内容" prop="desc">
                  <el-input v-model="assessReply.replyContent" type="textarea" placeholder="请输入回复内容"></el-input>
                </el-form-item>
                <el-button type="primary" @click="replyAssessCon">提交</el-button>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "shopDetail",
  data() {
    return {
      userAssessDetail: [],
      assessReply: {
        userName: "",
        replyContent: "",
      },
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  created() {
    this.getCheckAssess();
    this.assessReply.userName = this.user.userName;
  },
  methods: {
    ...mapActions("shop", ["checkAssessDetail", "replyAssess"]),
    getCheckAssess() {
      let id = String(this.$route.query.id);
      // console.log("id", id);
      this.checkAssessDetail({ id }).then((res) => {
        this.userAssessDetail = res;
        this.userAssessDetail.pics = JSON.parse(this.userAssessDetail.pics);
        this.assessReply.replyContent = "";
        // console.log("res", this.userAssessDetail.pics);
      });
    },
    replyAssessCon() {
      let replyContent = this.assessReply.replyContent;
      this.replyAssess({ replyContent });
      this.assessReply.replyContent = "";
    },
  },
};
</script>
    
<style scoped>
a {
  text-decoration: none;
  color: white;
}

html div {
  font-size: 14px;
}

::-webkit-scrollbar {
  display: none;
}

.pageContent {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  /* overflow-y: scroll; */
}

.shopTitle {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f0f0f0;
}

.shopDetailOne {
  height: 26px;
  font-size: 18px;
  font-weight: 400;
  border-left: 6px solid #1cb09a;
  padding-left: 10px;
  margin-left: 20px;
}

.shopListTwo {
  margin-right: 20px;
}

.shopListTwo button {
  background-color: #1cb09a;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
}

.shopDetailTwo {
  margin-right: 20px;
}

.shopDetailTwo button {
  background-color: #1cb09a;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
}

.shopDetailContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shopDetailData {
  width: 95%;
  height: 100%;
  margin-top: 25px;
  box-sizing: border-box;
  border: 1px solid #e4e4e4;
}

.dataHead {
  height: 50px;
  background-color: #f0f0f0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shopAssessDetail {
  width: 100%;
  background-color: white;
  display: flex;
}

.shopAssessDetailOne {
  width: 30%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px 15px;
}

.shopAssessDetailTwo {
  width: 70%;
  height: 100%;
  border-left: 1px solid #e4e4e4;
  box-sizing: border-box;
  padding-bottom: 100px;
}

.shopAssessDetailTwo p {
  margin-bottom: 10px;
}

.headBox {
  width: 130px;
  height: 150px;
  margin: 20px auto 80px;
  text-align: center;
}

.headBox img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  margin-bottom: 5px;
  display: inline-block;
}

.assessContentBox {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 5px;
  border-bottom: 2px solid #e4e4e4;
}

.assessContent {
  margin-bottom: 50px;
}

.assessContent span {
  color: #999999;
}

.assessContentImage p {
  margin-bottom: 20px;
}

.assessContentImageList {
  overflow: hidden;
}

.assessContentImageList div {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  border-radius: 5px;
}

.assessContentImageList div img {
  width: 100px;
  height: 100px;
}

.assessReply {
  width: 100%;
  padding: 20px 5px;
}

.assessReply form {
  width: 500px;
  height: 100%;
}

::v-deep .assessReply .el-input {
  width: 300px;
}

::v-deep .assessReply .el-textarea {
  width: 400px;
}

::v-deep .assessReply .el-textarea__inner {
  line-height: 5;
}

::v-deep .assessReply button {
  float: right;
  padding: 12px 35px;
  margin-bottom: 20px;
}
</style>